{
  const app = new Vue({
    el: '#header',
    data: {},
    methods: {
      fn() {
        window.history.back()
      }
    }
  })

  // 获取元素
  const goodsTotalcontent = document.querySelector('#goods-totalcontent')
  const popup = document.querySelector('.popup')
  const mask = document.querySelector('.mask')
  const service = document.querySelector('.service')
  const closeBtn = document.querySelector('#closeBtn')
  const body = document.querySelector('body')
  const goodsInfoTop = document.querySelector('.goods-info-top')
  const img = document.querySelector('#img')
  async function render() {
    const { data: res } = await axios.get(
      `/goods/detail&goodsId=${localStorage.getItem('goodsId')}`
    )
    console.log(res.data.detail)
    // 商品描述渲染
    goodsTotalcontent.innerHTML = await res.data.detail.content
    // 轮播图渲染
    banner(res.data.detail.goods_images)
    // 商品信息渲染
    goodsInfoTop.innerHTML = `   
         <div class="top">
           <div class="left">
             <i>￥</i>
             <em>${res.data.detail.goods_price_max}</em>
             <span>￥${res.data.detail.line_price_max}</span>
           </div>
           <div class="right"><span>已售${res.data.detail.goods_sales}件</span></div>
         </div>
         <div class="bottom">
           <span>${res.data.detail.goods_name}</span>
         </div>`
  }
  render()
  // 封装轮播图渲染函数
  function banner(images) {
    const qian = document.querySelector('.number .qian')
    const hou = document.querySelector('.number .hou')
    const banner = document.querySelector('.swiper-wrapper')
    hou.innerHTML = images.length
    banner.innerHTML = images
      .map((item, index) => {
        return `
              <div class="swiper-slide">
               <img
                 src="${item.external_url}"
                 alt=""
                 data-id=${index}
               />
             </div>
               `
      })
      .join('')
    var swiper = new Swiper('.mySwiper', {
      // spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })

    const spans = document.querySelectorAll('span.swiper-pagination-bullet')
    spans.forEach((element, index) => {
      element.dataset.id = index + 1
    })

    setInterval(function () {
      const span = document.querySelector(
        'span.swiper-pagination-bullet-active'
      )
      qian.innerHTML = span.dataset.id
    }, 100)
  }

  // 点击事件
  service.addEventListener('click', function () {
    mask.style.display = 'block'
    popup.classList.add('change')
    body.style.overflow = 'hidden'
  })
  // 关闭弹窗事件
  closeBtn.addEventListener('click', function () {
    mask.style.display = 'none'
    popup.classList.remove('change')
    body.style.overflow = 'auto'
  })
  mask.addEventListener('click', function () {
    closeBtn.click(), (img.style.display = 'none')
  })
  // 点击弹图事件
  goodsTotalcontent.addEventListener('click', function (e) {
    console.log(e.target)
    if (e.target.tagName === 'IMG') {
      mask.style.display = 'block'
      img.src = e.target.src
      img.style.display = 'block'
      body.style.overflow = 'hidden'
    }
    img.addEventListener('click', function () {
      closeBtn.click(), (img.style.display = 'none')
    })
  })
}
